<template>
  <div>
    <div class="topmsg">
      <div class="img">
        <img src="../assets/image/admin-header.png" alt="">
      </div>
      <div>
        <div class="msgtop">Hi，练红尘欢迎登入</div>
        <div class="msgdetail">
          <div>手机号码：156846254</div>
          <div class="line"></div>
          <div>超级管理员</div>
        </div>
      </div>
    </div>
    <div class="paddingbox">
      <div class="sssj">
        <div class="top">
          <div class="top_l">
            <span class="bord">实时数据</span>
            <span class="gray">统计截止 2023-07-05 24:00</span>
          </div>
          <div class="top_r">
            <div @click="changedate(0)" :class="{ topritem: true, activedate: dateflag === 0 }">本日</div>
            <div @click="changedate(1)" :class="{ topritem: true, activedate: dateflag === 1 }">本周</div>
            <div @click="changedate(2)" :class="{ topritem: true, activedate: dateflag === 2 }">本月</div>
            <div @click="changedate(3)" :class="{ topritem: true, activedate: dateflag === 3 }">本年</div>
          </div>
        </div>
        <div class="msg"></div>
      </div>
      <div class="sssjinfo">
        <div class="infoitem">
          <div class="infotop">320,356,365,326.12</div>
          <div class="infotext">发薪总和（元）</div>
        </div>
        <div class="infoitem">
          <div class="infotop">320</div>
          <div class="infotext">发薪笔数（次）</div>
        </div>
        <div class="infoitem">
          <div class="infotop">320</div>
          <div class="infotext">领薪笔数（次）</div>
        </div>
        <div class="infoitem">
          <div class="infotop">320</div>
          <div class="infotext">未领薪金额（元）</div>
        </div>
        <div class="infoitem">
          <div class="infotop">320</div>
          <div class="infotext">未领薪人数（人）</div>
        </div>
      </div>
      <div class="box">
        <div class="boxl">
          <div class="yysj">
            <div class="top">运营数据</div>
            <div class="yysjinfo">
              <div class="infoitem">
                <div class="topnum">1111</div>
                <div class="centertext">业绩额(元）</div>
                <div class="bottomtext">同比上月</div>
              </div>
              <div class="infoitem">
                <div class="topnum">1111</div>
                <div class="centertext">签单客户(人）</div>
                <div class="bottomtext">同比上月</div>
              </div>
              <div class="infoitem" style="margin-right: 0;">
                <div class="topnum">1111</div>
                <div class="centertext">注册未签单客户(人）</div>
                <div class="bottomtext">同比上月</div>
              </div>
            </div>
          </div>
          <div class="tdxx">
            <div class="top"><span>团队信息</span>
              <div><span class="detail">详情</span><img src="../assets/image/andmore.png" alt=""></div>
            </div>
            <div class="tdxxinfobox">
              <div class="infoitem">
                <div class="topnum">78<span class="fs12">人</span></div>
                <div class="bottomtext">
                  <div>团队成员</div><img src="../assets/image/andmore.png" alt="">
                </div>
              </div>
              <div class="infoitem">
                <div class="topnum">8<span class="fs12">人</span></div>
                <div class="bottomtext">
                  <div>团队组长</div><img src="../assets/image/andmore.png" alt="">
                </div>
              </div>
              <div class="infoitem">
                <div class="topnum">8<span class="fs12">人</span></div>
                <div class="bottomtext">
                  <div>团队主观</div><img src="../assets/image/andmore.png" alt="">
                </div>
              </div>
              <div class="infoitem">
                <div class="topnum">8<span class="fs12 origin">人</span><span class="fs12 origin pointer"
                    style="margin-left: 8px;">去分配</span></div>
                <div class="bottomtext">
                  <div>离职未分配</div><img src="../assets/image/andmore.png" alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="targetbox">
            <div class="lefttarget">
              <div id="myChart" :style="{ width: '100%', height: '303px' }"></div>
            </div>
            <div class="righttarget">
              <div class="top">
                <div class="bord">团队目标进度</div>
                <div class="flexcenterbox"><el-date-picker v-model="dateone" :clearable="false" @change="changedateone"
                    value-format="YYYY-MM" type="month" placeholder="请选择" />
                  <img src="../assets/image/down.png" alt="">
                </div>
              </div>
              <div id="myChartc" :style="{ width: '100%', height: '257px' }"></div>
            </div>
          </div>
        </div>
        <div class="boxr">
          <div class="msgbox">
            <div class="top">
              <div class="bord">消息</div>
              <div class="more" @click="opentc"><span>更多</span><img src="../assets/image/andmore.png" alt=""></div>
            </div>
            <div class="msglist">
              <div class="msgitem" v-for="(ele, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]" :key="index">
                <div class="date">11-16</div>
                <div class="blue">成单通知</div>
                <div class="line"></div>
                <div class="msgtext">羊坨坨跟进的客户11111111111111111111111111111111111</div>
              </div>
            </div>
          </div>
          <div class="rankinglistbox">
            <div class="top">
              <div class="bord">排行榜</div>
              <div class="more" @click="tophb"><span>查看更多</span><img src="../assets/image/andmore.png" alt=""></div>
            </div>
            <div class="tab">
              <div :class="{ tabitem: true, activetab: activetabflag === 0 }" @click="changetab(0)">总业绩</div>
              <div :class="{ tabitem: true, activetab: activetabflag === 1 }" @click="changetab(1)">新增保费</div>
            </div>
            <div class="listinfo" v-if="activetabflag === 0">
              <div class="toptitle">
                <div class="one">名次</div>
                <div class="two">姓名</div>
                <div class="three">所属分组</div>
                <div class="four">总业绩</div>
              </div>
              <div class="listitem">
                <div class="one">
                  <div class="num numone">1</div>
                </div>
                <div class="two">
                  <img src="../assets/image/admin-header.png" alt="">
                  张三
                </div>
                <div class="three">斗地主</div>
                <div class="four price">111</div>
              </div>
              <div class="listitem">
                <div class="one">
                  <div class="num numtwo">2</div>
                </div>
                <div class="two"><img src="../assets/image/admin-header.png" alt="">张三</div>
                <div class="three">斗地主</div>
                <div class="four price">111</div>
              </div>
              <div class="listitem">
                <div class="one">
                  <div class="num numthree">3</div>
                </div>
                <div class="two"><img src="../assets/image/admin-header.png" alt="">张三</div>
                <div class="three">斗地主</div>
                <div class="four price">111</div>
              </div>
              <div class="listitem">
                <div class="one">
                  <div class="num numfour">4</div>
                </div>
                <div class="two"><img src="../assets/image/admin-header.png" alt="">张三</div>
                <div class="three">斗地主</div>
                <div class="four price">111</div>
              </div>
            </div>
            <div class="listinfo" v-if="activetabflag === 1">
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-drawer v-model="tcflag" class="drawer" title="消息" direction="rtl" size="30%">
      <div class="closedrawer" @click="tcflag = false">
        <span>收</span><span>起</span><img src="../assets/image/组355.png" alt="" />
      </div>
      <div class="tcbox">
        <div class="tcboxitem">
          <div class="top">成单通知</div>
          <div class="msginfo">
            <div class="cdmsg">你跟进的客户 <span class="bord">郑州富士康科技有限公司</span> 开通了<span class="bord">「子弹发薪」</span> 服务；</div>
            <div class="lablebox">
              <div class="lable">操作人：</div>
              <div class="lablecontent">张花花</div>
            </div>
            <div class="lablebox">
              <div class="lable">操作时间：</div>
              <div class="lablecontent">2022-06-02 22:23</div>
            </div>
          </div>
        </div>
        <div class="tcboxitem">
          <div class="top">续费通知</div>
          <div class="msginfo">
            <div class="cdmsg">你跟进的客户 <span class="bord">郑州富士康科技有限公司</span> 续费了<span class="bord">「子弹发薪」</span> 服务；</div>
            <div class="lablebox">
              <div class="lable">操作人：</div>
              <div class="lablecontent">张花花</div>
            </div>
            <div class="lablebox">
              <div class="lable">操作时间：</div>
              <div class="lablecontent">2022-06-02 22:23</div>
            </div>
          </div>
        </div>
        <div class="tcboxitem">
          <div class="top">客户付款通知</div>
          <div class="fkbox">
            <div class="fkjetext">付款金额</div>
            <div class="fkjenum">¥3699.00</div>
          </div>
          <div class="msginfo">
            <div class="lablebox">
              <div class="lable">付款客户：</div>
              <div class="lablecontent">郑州富士康科技有限公司</div>
            </div>
            <div class="lablebox">
              <div class="lable">付款方式：</div>
              <div class="lablecontent">公对公</div>
            </div>
            <div class="lablebox">
              <div class="lable">收款账户：</div>
              <div class="lablecontent">苏州蓝豚互动信息科技有限公司</div>
            </div>
            <div class="lablebox">
              <div class="lable">收款汇总：</div>
              <div class="lablecontent">今天收款3笔，共<span class="lightyellow">10797.00</span>元</div>
            </div>
          </div>
        </div>
        <div class="tcboxitem">
          <div class="top">关闭服务通知</div>
          <div class="msginfo">
            <div class="cdmsg">你跟进的客户 <span class="bord">郑州富士康科技有限公司</span> 关闭了<span class="bord">「子弹发薪」</span> 服务；</div>
            <div class="lablebox">
              <div class="lable">操作人：</div>
              <div class="lablecontent">张花花</div>
            </div>
            <div class="lablebox">
              <div class="lable">操作时间：</div>
              <div class="lablecontent">2022-06-02 22:23</div>
            </div>
          </div>
        </div>
        <div class="tcboxitem">
          <div class="top">修改服务通知</div>
          <div class="msginfo">
            <div class="cdmsg">修改 <span class="bord">郑州富士康科技有限公司</span> 的服务阶段为<span class="bord">已交付</span></div>
            <div class="lablebox">
              <div class="lable">操作人：</div>
              <div class="lablecontent">张花花</div>
            </div>
            <div class="lablebox">
              <div class="lable">操作时间：</div>
              <div class="lablecontent">2022-06-02 22:23</div>
            </div>
          </div>
        </div>
        <div class="tcboxitem">
          <div class="top">离职交接通知</div>
          <div class="msginfo">
            <div class="cdmsg">已将 <span class="bord">韩翠花</span> 的所有数据交接给<span class="bord">肖战</span> ，生效时间为 <span class="bord">2022年08月16日</span> ；</div>
            <div class="lablebox">
              <div class="lable">操作人：</div>
              <div class="lablecontent">张花花</div>
            </div>
            <div class="lablebox">
              <div class="lable">操作时间：</div>
              <div class="lablecontent">2022-06-02 22:23</div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, onMounted,onActivated, h } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import * as echarts from 'echarts'
import { bottom, right } from '@popperjs/core'
const opentc = () => {
  tcflag.value = true
}
const tcflag = ref(false)
const router = useRouter()
const route = useRoute()
const dateflag = ref(2)
const changedateone = (val: any) => {

}
const dateone = ref('')
const changedate = (i: number) => {
  dateflag.value = i
}
const changetab = (i: number) => {
  activetabflag.value = i
}
const tophb = () => {
  router.push({ path: '/rankinglist' })
}
const activetabflag = ref(0)


const optionc = <any>({
  backgroundColor: '#ffffff',
  grid: {
    left: '0%',
    right: '1%',
    bottom: '16px',
    top: '0%',
    containLabel: true,
  },
  tooltip: {
    show: true,
    formatter: '{b}<br/>{c}%',
    textStyle: {
      fontWeight: 'bold',
      fontSize: 14,
    },
    axisPointer: {
      type: 'shadow',
    },
  },
  yAxis: [{
    type: 'category',
    inverse: true,
    axisLabel: {
      show: true,
      color: '#9497B1',
      fontSize: 14,
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: '#707070',
      },
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#707070',
        width: 1,
      },
    },
    axisTick: {
      show: false,
    },
    data: ['东方航空', '东方航空', '东方航空', '东方航空', '东方航空', '东方航空', '东方航空', '东方航空', '东方航空', '东方航空', '南方航空', '上海航空', '卡塔尔航空', '顺丰航空', '圆通航空', '海南航空', '汉莎航空', '全日航', '韩国航空']
  },],
  xAxis: [{
    type: 'value',
    axisTick: {
      show: false,
    },
    max: 100,
    axisLine: {
      show: false,
      lineStyle: {
        color: '#707070',
        width: 1,
      },
    },
    splitLine: {
      show: false,
    },
    nameTextStyle: {
      color: '#f7113a',
    },
    // nameLocation: "end",
    name: '',
    axisLabel: {
      show: true,
      inside: false,
      textStyle: {
        color: '#9497B1',
        fontSize: 17,
      },
      interval: 0,
      // rotate: 25,
      formatter: '{value}%'
    },
  },],
  dataZoom: [
    // {
    //   id: 'dataZoomX',
    //   type: 'slider',
    //   xAxisIndex: [0],
    //   filterMode: 'filter',
    //   bottom: "1%",
    //   height: "10"
    // },
    {
      id: 'dataZoomY',
      type: 'slider',
      yAxisIndex: [0],
      filterMode: 'empty',
      right: '1%',
      height: '85%',
      width: '10'
    }
  ],
  series: [{
    name: 'assist',
    type: 'bar',
    stack: '1',
    itemStyle: {
      normal: {
        barBorderColor: 'rgba(0,0,0,0)',
        color: 'rgba(0,0,0,0)',
      },
      emphasis: {
        barBorderColor: 'rgba(0,0,0,0)',
        color: 'rgba(0,0,0,0)',
      },
    },
    tooltip: {
      trigger: 'none',
    },
    data: [],
  }, //设置两个柱状图进行重叠，第一层柱子设置透明度,由此来实现柱子与坐标轴之间的距离  stack:''设置重叠效果
  {
    type: 'bar',
    stack: '1',
    barWidth: 12,
    barBorderRadius: 30,
    itemStyle: {
      normal: {
        barBorderRadius: 20,
        color: function (params: any) {
          // console.log('测试',_that.checkName)
          // if (_that.platName == params.name) {
          //    return 'yellow';
          // } else {
          return {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: '#80BDF6', // 0% 处的颜色
            },
            {
              offset: 0.9,
              color: '#1A64FD', // 100% 处的颜色
            },
            ],
            // }
          }
        },
      },
    },
    // zlevel: 2,
    data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 90, 86, 80, 75, 70, 60, 50, 40, 20]
  },
  ],
})

var getmax = 100
var getvalue = 100
const option = <any>({
  backgroundColor: '#EBEFFE',
  title: [{
    text: '完成率（完成人数/任务人数）',
    bottom: '3%',
    x: 'center',
    padding: [7, 14],
    textStyle: {
      fontSize: 12,
      color: '#9497B1'
    }
  },
  {
    text: '总销售指标完成进度',
    top: '5%',
    x: 'center',
    padding: [7, 14],
    fontWeight: 700,
    textStyle: {
      fontSize: 16,
      color: '#202536'
    }
  }],
  angleAxis: {
    show: false,
    max: getmax * 360 / 270, //-45度到225度，二者偏移值是270度除360度
    type: 'value',
    startAngle: 225, //极坐标初始角度
    splitLine: {
      show: false
    }
  },
  barMaxWidth: 15, //圆环宽度
  radiusAxis: {
    show: false,
    type: 'category',
  },
  //圆环位置和大小
  polar: {
    center: ['50%', '50%'],
    radius: '130%'
  },
  series: [{
    type: 'bar',
    data: [{ //上层圆环，显示数据
      value: getvalue,
      itemStyle: {
        color: '#3E5FF5',
      },
    }],
    barGap: '-100%', //柱间距离,上下两层圆环重合
    coordinateSystem: 'polar',
    roundCap: true, //顶端圆角
    z: 3 //圆环层级，同zindex
  },
  { //下层圆环，显示最大值
    type: 'bar',
    data: [{
      value: getmax,
      itemStyle: {
        color: '#1598FF',
        opacity: 0.2,
        borderWidth: 0,
      },
    }],
    barGap: '-100%',
    coordinateSystem: 'polar',
    roundCap: true,
    z: 1
  },
  //仪表盘
  {
    type: 'gauge',
    startAngle: 225, //起始角度，同极坐标
    endAngle: -45, //终止角度，同极坐标
    axisLine: {
      show: false,
    },
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: false
    },
    splitLabel: {
      show: false
    },
    pointer: { // 分隔线
      shadowColor: 'auto', //默认透明
      shadowBlur: 5, length: '50%', width: '2',
    }, itemStyle: {
      color: '#3E5FF5', borderColor: '#73BFFD', borderWidth: 5
    }, detail: { formatter: function (params: any) { return getvalue + '%' }, color: '#3E5FF5', fontSize: 32, offsetCenter: [0, 100], }, title: {
      show: false
    }, data: [{ value: getvalue, }]
  }, {
    name: '外部刻度', type: 'gauge',
    center: ['50%', '50%'], radius: '53%', min: 0, //最小刻度
    max: 100, //最大刻度
    splitNumber: 10, //刻度数量
    startAngle: 225, endAngle: -45, axisLine: { show: true, lineStyle: { width: 1, color: [[1, 'rgba(0,0,0,0)']] } }, //仪表盘轴线
    axisLabel: { show: false, color: '#4d5bd1', distance: 25, }, //刻度标签。
    axisTick: {
      show: true, splitNumber: 7, lineStyle: {
        color: '#9EAFFA', //用颜色渐变函数不起作用
        width: 1,
      }, length: -3
    }, //刻度样式
    splitLine: {
      show: false, length: -20, lineStyle: {
        color: '#73BFFD', //用颜色渐变函数不起作用
      }
    }, //分隔线样式
    detail: {
      show: false
    }, pointer: {
      show: false
    }
  }, {//指针外环
    'type': 'pie', 'hoverAnimation': false, 'legendHoverLink': false, 'radius': ['10%', '15%'], 'z': 10, 'label': {
      'normal': {
        'show': false
      }
    }, 'labelLine': {
      'normal': {
        'show': false
      }
    }, 'data': [{ 'value': 100, itemStyle: { normal: { color: '#ffffff', } } }]
  }, {//指针内环
    'type': 'pie', 'hoverAnimation': false, 'legendHoverLink': false, 'radius': ['0%', '10%'], 'z': 10, 'label': {
      'normal': {
        'show': false
      }
    }, 'labelLine': {
      'normal': {
        'show': false
      }
    }, 'data': [{ 'value': 100, itemStyle: { normal: { color: '#73BFFD' } } }]
  }]
})
const initeCharts = () => {
  const myChart = echarts.init(document.getElementById('myChart'))
  // 绘制图表
  myChart.setOption(option)
}
const initeChartsc = () => {
  const myChartc = echarts.init(document.getElementById('myChartc'))
  // 绘制图表
  myChartc.setOption(optionc)
}
onMounted(() => {
  initeCharts()
  initeChartsc()
})
onActivated(() => {
  initeCharts()
  initeChartsc()
})
</script>

<style lang="scss" scoped>
.drawer {
  .closedrawer {
    cursor: pointer;
    position: fixed;
    top: 50px;
    right: 576px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 59px;
    background-color: #0256ff;
    font-size: 14px;
    color: #ffffff;

    img {
      margin-top: 5px;
    }
  }
}

.targetbox {
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 8px;
  margin-top: 16px;
  height: 303px;
  display: flex;

  .righttarget {
    padding: 0 16px;
    box-sizing: border-box;
    flex: 1;

    .top {
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .bord {
        font-size: 16px;
        color: #202536;
        font-weight: 700;
      }
    }
  }

  .lefttarget {
    width: 300px;
  }
}

.rankinglistbox {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  margin-top: 16px;
  background-color: #ffffff;
  border-radius: 8px;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .bord {
      font-size: 16px;
      font-weight: 700;
      color: #202536;
    }

    .more {
      font-size: 12px;
      color: #9497B1;
      cursor: pointer;

      img {
        margin-left: 5px;
      }
    }
  }

  .listinfo {
    height: 345px;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;

    .toptitle {
      height: 42px;
      line-height: 42px;
      color: #9497B1;
      font-size: 14px;
    }

    .listitem {
      height: 56px;
      line-height: 56px;
      font-size: 14px;

      .num {
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
      }

      .numone {
        background-color: red;
        color: #ffffff;
      }

      .numtwo {
        background-color: #FF7642;
        color: #ffffff;
      }

      .numthree {
        background-color: #FFA814;
        color: #ffffff;
      }

      .numfour {
        background-color: #9497B1;
        color: #ffffff;
      }
    }

    .listitem:hover {
      background-color: #EBEFFE;
    }

    .listitem,
    .toptitle {
      width: 100%;
      box-sizing: border-box;
      display: flex;

      .one {
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        flex: 2;
      }

      .two {
        text-align: center;
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 32px;
          height: 32px;
          border-radius: 4px;
          margin-right: 6px;
        }
      }

      .three {
        text-align: center;
        flex: 3;
      }

      .four {
        text-align: center;
        flex: 4;
      }

      .price {
        color: #FF7642;
      }
    }
  }

  .tab {
    display: flex;
    width: 100%;
    height: 46px;
    align-items: center;
    border-bottom: 1px solid #F4F4F7;

    .tabitem {
      min-width: 42px;
      text-align: center;
      margin-right: 32px;
      font-size: 14px;
      color: #9497B1;
      height: 100%;
      line-height: 46px;
      cursor: pointer;
    }
  }
}

.activetab {
  color: #3E5FF5 !important;
}

.blue {
  color: #3E5FF5;
}

.msgbox {
  background-color: #ffffff;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;

  .msglist {
    height: 125px;
    overflow-y: scroll;

    .msgitem {
      cursor: pointer;
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 14px;
      margin-bottom: 12px;

      .date {
        margin-right: 5px;
      }

      .line {
        width: 1px;
        background-color: #3D3D3D;
        height: 14px;
        margin: 0 5px;
      }

      .msgtext {
        flex: 1;
        flex-shrink: 0;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
      }
    }
  }

  .top {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .bord {
      font-weight: 700;
      font-size: 16px;
    }

    .more {
      cursor: pointer;
      color: #9497B1;
      font-size: 12px;

      img {
        margin-left: 5px;
      }
    }
  }
}

.fs12 {
  font-size: 12px;
}

.origin {
  color: #FF7642;
}

.tdxx {
  margin-top: 16px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 16px;
  background-color: #ffffff;

  .top {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;

    .detail {
      color: #9497B1;
      font-size: 14px;
      font-weight: 400;
      margin-right: 5px;
      cursor: pointer;
    }
  }

  .tdxxinfobox {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .infoitem {
      flex: 1;
      flex-shrink: 0;

      .topnum {
        font-size: 24px;
        font-weight: 700;
        color: #202536;
      }

      .bottomtext {
        cursor: pointer;
        margin-top: 6px;
        display: flex;
        align-items: center;
        color: #9497B1;
        font-size: 14px;

        img {
          margin-left: 5px;
          height: 12px;
        }
      }
    }
  }
}

.yysj {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;

  .top {
    font-size: 16px;
    font-weight: 700;
  }

  .yysjinfo {
    margin-top: 16px;
    display: flex;
    align-items: center;

    .infoitem {
      padding: 24px 16px;
      box-sizing: border-box;
      margin-right: 16px;
      height: 124px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      flex: 1;
      background-color: #FAFAFC;
      border-radius: 4px;

      .bottomtext {
        font-size: 12px;
        color: #00D679;
      }

      .centertext {
        font-size: 14px;
        color: #9497B1;
      }

      .topnum {
        font-size: 24px;
        font-weight: 700;
      }
    }
  }
}

.box {
  margin-top: 16px;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  display: flex;

  .boxl {
    width: 69%;
    flex-shrink: 0;
  }

  .boxr {
    width: 30%;
    flex-shrink: 0;
  }
}

.activedate {
  background-color: #3E5FF5 !important;
  color: #ffffff !important;
}

.sssjinfo {
  width: 100%;
  box-sizing: border-box;
  height: 98px;
  background-color: #3472ff;
  border-radius: 8px;
  padding: 16px 32px;
  display: flex;
  align-items: center;

  .infoitem {
    flex: 1;
    flex-shrink: 0;
    text-align: center;

    .infotop {
      font-size: 24px;
      color: #FFFFFF;
      margin-bottom: 10px;
    }

    .infotext {
      font-size: 16px;
      color: #ffffff;
    }
  }
}

.sssj {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 0;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .top_l {
      .bord {
        color: #3D3D3D;
        font-size: 16px;
        font-weight: 700;
        margin-right: 12px;
      }

      .gray {
        font-size: 12px;
        color: #9497B1;
      }
    }

    .top_r {
      width: 157px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      border: 1px solid #D1D7F3;
      border-radius: 4px;
      cursor: pointer;

      .topritem {
        height: 26px;
        line-height: 26px;
        flex: 1;
        text-align: center;
        font-size: 12px;
        color: #9EAFFA;
      }
    }
  }
}

.paddingbox {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
}

.topmsg {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 13px 16px;
  height: 70px;

  img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    margin-right: 12px;
  }

  .msgtop {
    font-size: 16px;
    color: #3D3D3D;
    font-weight: 700;
  }

  .msgdetail {
    margin-top: 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #9497B1;

    .line {
      width: 2px;
      height: 12px;
      margin: 0 8px;
      background-color: #9497B1;
    }
  }
}

::v-deep(.el-input__wrapper) {
  width: 100px;
  background-color: rgb(85 0 0 / 0%);
  border: noen;
  box-shadow: none;
  cursor: pointer;
}

::v-deep(.el-input__inner) {
  cursor: pointer;
}

::v-deep(.el-input) {
  width: 100px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 100%;
}

.tcbox {
  border-top: 1px solid #F4F4F7;
  padding-top: 24px;
  margin-top: -20px;

  .tcboxitem {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #F4F4F7;
    border-radius: 8px;
    margin-bottom: 16px;
    .fkbox{
      margin-top: 16px;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .fkjetext{
        color: #9497B1;
        font-size: 14px;
      }
      .fkjenum{
        color: #FF7642;
        font-size: 26px;
        font-weight: 700;
      }
    }

    .msginfo {
      padding: 16px;
      box-sizing: border-box;
      width: 100%;

      .lablebox {
        font-size: 14px;
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        .lable {
          color: #9497B1;
          width: 80px;
        }

        .lablecontent {
          color: #202536;
        }
      }

      .cdmsg {
        font-size: 14px;
        color: #565868;
        margin-bottom: 16px;

        .bord {
          font-weight: 700;
          color: #202536;
        }
      }
    }

    .top {
      font-size: 14px;
      color: #3E5FF5;
      display: flex;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
      padding-left: 18px;
      background-color: #E6EEFF;
      height: 42px;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;
    }
  }
}
.lightyellow{
  color: #FF7642;
}
</style>